{% stylesheet %}
  .blog_collection_default .collection_content ul {
    display: grid;
    row-gap: 30px;
    column-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
  }

  .blog_collection_default .collection_content li {
    list-style-type: none;
    overflow: hidden;
    text-align: center;
  }

  .blog_collection_default .collection_content li .collection_pic {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 30px;
  }

  .blog_collection_default .collection_content li .collection_img {
    width: 100%;
  }

  .blog_collection_default .collection_content li .collection_pic img {
    width: 100%;
    object-fit: cover;
  }

  .blog_collection_default .collection_content li .collection_name {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .blog_collection_default .collection_content li .blog_collection_list_detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
  }


  @media (max-width: 767px) {
    .blog_collection_default .collection_content ul {
      row-gap: 15px;
      column-gap: 15px;
      grid-template-columns: repeat(2, 1fr);
    }
  }
{% endstylesheet %}

<div class="blog_collection_default container_wrapper" id="blog_collection">
  <h1 class="title">{{ lang.general.news }}</h1>
  <div class="plugin-container-header"></div>

  <div class="collection_content">
    {% assign list_size = news.list | size %}
    {% if list_size > 0 %}
      <ul>
        {% for item in news.list %}
          {%- if item.image_alt == "" -%}
            {% assign article_alt = item | image_alt:'news'   %}
          {%- else -%}
            {% assign article_alt = item.image_alt %}
          {%- endif -%}
          <li>
            <a class="collection_pic" href="/news/{{ item.handle }}">
              <div class="collection_img">
                <img
                  data-src="{{ item.src }}"
                  src="{{ 'empty_loading.png' | public_asset_abs_url }}"
                  alt="{{ article_alt }}"
                >
              </div>
            </a>
            <a href="/news/{{ item.handle }}" class="collection_name">
              {{ item.title }}
            </a>
            <div class="blog_collection_list_detail">
              {{ item.descript }}
            </div>
          </li>
        {% endfor %}
      </ul>
      {% include pagination ,{ paginate : paginate } %}
    {% else %}
      {% include 'empty', text: lang.general.no_news %}
    {% endif %}
    <div class="plugin-container-footer"></div>
  </div>
</div>
<script type="text/javascript">
  console.log({{ posts | json }})
</script>
